8.  animation

8.3  objekt bewegen

Darunter wird verstanden, ein in einer seite angezeigtes element (hier auch als objekt bezeichnet) durch eine aktion (beispielsweise mausklick) auf dem bildschirm zu bewegen oder mit dem mauszeiger zu ziehen.

beispiel 8c - objekt bewegen
Das beispiel zeigt eine kleine grafik, die man entweder per mausklick bewegen oder mit dem mauszeiger ziehen kann. Der container katze enthält die grafik imgkatze. Mit den vier links kann man den container schrittweise (10 pixel) in jede beliebige richtung bewegen. Man kann aber auch die katze anklicken. Dann ändert sich das aussehen des mauszeigers und er wird mit der katze "verbunden", d.h. wenn man den zeiger bewegt "zieht" er die katze mit. Ein erneuter klick löst die verbindung..

funktion init
Die funktion wird beim laden der seite aufgerufen und ermittel die position und größe des containers mit der katze. Außerdem werden für die ereignisse mousedown und mousemove funktionen vereinbart. Vor den funktionen stehen einige globale variable.

bewegung per link
Mit den folgenden funktionen wird die katze schrittweise (10 pixel) bewegt. Es erfolgt keine bewegung, wenn die katze dabei den bildschirmrand überschreiten würde.

ziehen mit dem mauszeiger
Beim anklicken der katze ruft das ereignis onmousedown die funktion mousestat auf. Wenn man dann den zeiger bewegt , ruft das ereignis onmousemove die funktion mousebew auf.

Die funktion mousestat reagiert nur, wenn sich beim klicken der mauszeiger über der katze (grafik imgkatze) befindet. Wenn die variable bereit den inhalt true hat, wird die katze schon festgehalten, die variable wird auf false gesetzt und die katze wird losgelassen. Andernfalls wird die variable auf true gesetzt und die distanz zwischen der maus-position und der linken, oberen ecke des containers wird errechnet. Von jetzt an folgt die katze dem mauszeiger.

Die funktion mousebew wird bei jeder bewegung des mauszeigers aufgerufen. Aus der aktuellen position des zeigers und den in mousestat errechneten distanzen wird die neue position für den container katze errechnet und der container wird neu positioniert.

EXEC    beispiel8c  ausführen


zum untermenü


    IMPRESSUM  

    KONTAKT  

    PRIVAT  

    D O K U  


  H T M L  
  C S S  
  P H P  
  My S Q L  
  javascript